<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<title>控制台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">

		<link rel="shortcut icon" href="assets/img/favicon.ico" />
		<!-- Loading Bootstrap -->
		<link href="assets/css/backend.min.css" rel="stylesheet">
		<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" />
		<style type="text/css">
			.sm-st {
				background: #fff;
				padding: 20px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				margin-bottom: 20px;
				-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
				box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
			}
			
			.sm-st-icon {
				width: 60px;
				height: 60px;
				display: inline-block;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
				background: #eee;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				float: left;
				margin-right: 10px;
				color: #fff;
			}
			
			.sm-st-info {
				font-size: 12px;
				padding-top: 2px;
			}
			
			.sm-st-info span {
				display: block;
				font-size: 14px;
				font-weight: 600;
			}
			
			.orange {
				background: #fa8564 !important;
			}
			
			.tar {
				background: #45cf95 !important;
			}
			
			.sm-st .green {
				background: #86ba41 !important;
			}
			
			.pink {
				background: #AC75F0 !important;
			}
			
			.yellow-b {
				background: #fdd752 !important;
			}
			
			.stat-elem {
				background-color: #fff;
				padding: 18px;
				border-radius: 40px;
			}
			
			.stat-info {
				text-align: center;
				background-color: #fff;
				border-radius: 5px;
				margin-top: -5px;
				padding: 8px;
				-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
				box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
				font-style: italic;
			}
			
			.stat-icon {
				text-align: center;
				margin-bottom: 5px;
			}
			
			.st-red {
				background-color: #F05050;
			}
			
			.st-green {
				background-color: #27C24C;
			}
			
			.st-violet {
				background-color: #7266ba;
			}
			
			.st-blue {
				background-color: #23b7e5;
			}
			
			.stats .stat-icon {
				color: #28bb9c;
				display: inline-block;
				font-size: 26px;
				text-align: center;
				vertical-align: middle;
				width: 50px;
				float: left;
			}
			
			.stat {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				margin-right: 10px;
			}
			
			.stat .value {
				font-size: 20px;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}
			
			.stat .name {
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.stat.lg .value {
				font-size: 26px;
				line-height: 28px;
			}
			
			.stat.lg .name {
				font-size: 16px;
			}
			
			.stat-col .progress {
				height: 2px;
			}
			
			.stat-col .progress-bar {
				line-height: 2px;
				height: 2px;
			}
			
			.item {
				padding: 30px 0;
			}
		</style>
		<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
		<!--[if lt IE 9]>
          <script src="assets/js/html5shiv.js"></script>
          <script src="assets/js/respond.min.js"></script>
        <![endif]-->
		<script type="text/javascript">
			var require = {
				"config": {
					"site": {
						"name": "",
						"cdnurl": "./",
						"version": 1500448467,
						"timezone": "Asia/Shanghai",
						"languages": {
							"backend": "zh-cn",
							"frontend": "zh-cn"
						}
					}
				}
			};
		</script>
	</head>

	<body class="inside-header inside-aside ">
		<div id="main" role="main">
			<div class="tab-content tab-addtabs">
				<div id="content">
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<section class="content-header hide">
								<h1>
                                    控制台                                    <small>Control panel</small>
                                </h1>
							</section>
							<!-- RIBBON -->
							<div id="ribbon">
								<ol class="breadcrumb pull-left">
									<li>
										<a href="dashboard" class="addtabsit"><i class="fa fa-dashboard"></i> 控制台</a>
									</li>
								</ol>
								<ol class="breadcrumb pull-right">
									<li>
										<a href="javascript:;" data-url="dashboard">控制台</a>
									</li>
								</ol>
							</div>
							<!-- END RIBBON -->
							<div class="content">

								<div class="panel panel-default panel-intro">
									<div class="panel-heading">
										<div class="panel-lead"><em>控制台（Dashboard）</em>用于展示当前数据库实例的统计数据、图表及实时进程信息</div>
										<ul class="nav nav-tabs">
											<li class="active">
												<a href="#one" data-toggle="tab">概要信息</a>
											</li>
											<li>
												<a href="#two" data-toggle="tab">当前进程</a>
											</li>
										</ul>
									</div>
									<div class="panel-body">
										<div id="myTabContent" class="tab-content">
											<div class="tab-pane fade active in" id="one">
												<div class="row">
													<div class="col-sm-3 col-xs-6">
														<div class="sm-st clearfix">
															<span class="sm-st-icon st-red"><i class="fa fa-line-chart"></i></span>
															<div class="sm-st-info">
																<span id="uptime"></span> 运行时长
															</div>
														</div>
													</div>
													<div class="col-sm-3 col-xs-6">
														<div class="sm-st clearfix">
															<span class="sm-st-icon st-violet"><i class="fa fa-sliders"></i></span>
															<div class="sm-st-info">
																<span id="threadsRunning"></span> 当前连接数
															</div>
														</div>
													</div>
													<div class="col-sm-3 col-xs-6">
														<div class="sm-st clearfix">
															<span class="sm-st-icon st-blue"><i class="fa fa-hdd-o"></i></span>
															<div class="sm-st-info">
																<span id="dataTotal"></span> 数据量
															</div>
														</div>
													</div>
													<div class="col-sm-3 col-xs-6">
														<div class="sm-st clearfix">
															<span class="sm-st-icon st-green"><i class="fa fa-info"></i></span>
															<div class="sm-st-info">
																<span id="innoDBBufferPoolSize"></span> InnoDB缓存使用率
															</div>
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-lg-8">
														<div id="qpsChart" style="width: 100%; height: 350px;"></div>
													</div>
													<div class="col-lg-4">
														<div class="card sameheight-item stats">
															<div class="card-block">
																<div class="row row-sm stats-container">
																	<div class="col-xs-6 stat-col">
																		<div class="stat-icon"> <i class="fa fa-send"></i> </div>
																		<div class="stat">
																			<div class="value" id="bytesSent"></div>
																			<div class="name"> 发送（流量） </div>
																		</div>
																		<div class="progress">
																			<div class="progress-bar progress-bar-success" style="width: 20%"></div>
																		</div>
																	</div>
																	<div class="col-xs-6 stat-col">
																		<div class="stat-icon"> <i class="fa fa-sign-in"></i> </div>
																		<div class="stat">
																			<div class="value" id="bytesReceived"></div>
																			<div class="name"> 接受（流量） </div>
																		</div>
																		<div class="progress">
																			<div class="progress-bar progress-bar-success" style="width: 20%"></div>
																		</div>
																	</div>
																	<div class="col-xs-6  stat-col">
																		<div class="stat-icon"> <i class="fa fa-cubes"></i> </div>
																		<div class="stat">
																			<div class="value" id="schemaTotal"></div>
																			<div class="name"> Schema数量 </div>
																		</div>
																		<div class="progress">
																			<div class="progress-bar progress-bar-success" style="width: 20%"></div>
																		</div>
																	</div>
																	<div class="col-xs-6  stat-col">
																		<div class="stat-icon"> <i class="fa fa-table"></i> </div>
																		<div class="stat">
																			<div class="value" id="tableTotal"></div>
																			<div class="name"> Table数量 </div>
																		</div>
																		<div class="progress">
																			<div class="progress-bar progress-bar-success" style="width: 20%"></div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>

												<div class="row" style="margin-top:15px;">

													<div class="col-lg-12">
														<h4>语句统计</h4>
													</div>
													<div class="col-lg-12">
														<div id="queryChart" style="width: 100%; height: 350px;"></div>
													</div>

												</div>

											</div>
											<div class="tab-pane fade" id="two">
												<div class="row">
													<div class="col-xs-12">
														<div class="box box-danger">
															<div class="box-body">
																<div class="widget-body no-padding">
																	<div id="toolbar" class="toolbar">
																		<a href="javascript:;" id="reload" class="btn btn-primary btn-refresh"><i title="刷新进程" class="fa fa-refresh"></i> </a>
																	</div>
																	<div class="table-responsive no-padding">
																				<table class="table  table-hover" style="width:100%" id="processlist">
																	              	<thead>
																					    <tr>
																					      <th>ID</th>
																					      <th>User</th>
																					      <th>Host</th>
																					      <th>db</th>
																					      <th>Comand</th>
																					      <th>Time</th>
																					      <th>State</th>
																					      <th>Info</th>
																					    </tr>
																					</thead>
																	                <tbody id="tbCluster">
																	                	<!--
																	                    	加载进程列表
																	                    -->
																	              	</tbody>
																	              </table>
																	</div>
																	
																</div>
															</div>
														</div>
													</div>
													
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- jQuery 2.2.3 -->
								<script src="assets/js/jquery-2.2.3.min.js"></script>
								<script src="assets/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
								<!-- Bootstrap 3.3.6 -->
								<script src="assets/js/bootstrap.min.js"></script>
								<script src="assets/js/bootbox.min.js"></script>
								<script src="assets/js/jquery.mloading.js" type="text/javascript" charset="utf-8"></script>
								<!--
                                	作者：360841519@qq.com
                                	时间：2017-09-11
                                	描述：自定义JS
                                -->
								<script src="assets/js/custom/parent.js" type="text/javascript" charset="utf-8"></script>
								<script src="assets/js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
								<script src="assets/js/custom/dashboard.js" type="text/javascript" charset="utf-8"></script>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>